<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title>首页-美食</title>
		<link rel="stylesheet" href="css/css-comment.css">
		<link rel="stylesheet" type="text/css" href="css/home_food.css" />
		<script type="text/javascript" src="js/rem.js"></script>
		<style type="text/css">
			[v-cloak] {
				display: none;
			}
		</style>
	</head>

	<body>
		<div id="app" v-cloak class="homefood">
			<div class="homefooda">
				<div @click="toinner" v-for="item in sorts" class="homefooda_inner">
					<div class="homefooda_inner_img">
						<img :src="item.img" />
					</div>
					<div class="homefooda_inner_txt">{{item.sortname}}</div>
				</div>
			</div>

			<div class="homefoodb">
				<img :src="banner" />
			</div>

			<div class="homefoodc">			
				<div class="homefoodc_inner homefoodc_inner1">
					<div class="hi1_inner">全部美食</div>
					<img src="images/z_down.png" />
				</div>

				<div class="homefoodc_inner homefoodc_inner2">
					<div class="hi1_inner">附近</div>
					<img src="images/z_down.png" />
				</div>

				<div class="homefoodc_inner homefoodc_inner3">
					<div class="hi1_inner">人均从高到低</div>
					<img src="images/z_down.png" />
				</div>

				<div class="homefoodc_inner homefoodc_inner4">
					<div class="hi1_inner">筛选</div>
					<img src="images/z_down.png" />
				</div>
				
			</div>

			<div class="homefoodd">
				<!--全部美食-->
				<div class="homefoodd_inner homefoodd_inner1">
					<div class="homefoodd_inner_left">
						<div class="hil_inner hili_cheak">美食1</div>
						<div class="hil_inner">美食2</div>
						<div class="hil_inner">美食3</div>
						<div class="hil_inner">美食4</div>
					</div>
					
					<div class="homefoodd_inner_right">
						
						<div class="hir_b">
							<div class="hir_b_title">快餐小吃</div>
							<div class="hir_b_content">
								<div class="hbc_inner">西式快餐</div>
								<div class="hbc_inner">中式简餐</div>
								<div class="hbc_inner">地方小吃</div>
								<div class="hbc_inner">米粉米线</div>
							</div>
						</div>
						
						<div class="hir_b">
							<div class="hir_b_title">休闲茶饮</div>
							<div class="hir_b_content">
								<div class="hbc_inner">奶茶</div>
								<div class="hbc_inner">咖啡</div>
								<div class="hbc_inner">酒吧</div>
								<div class="hbc_inner">茶馆</div>
							</div>
						</div>
						
					</div>
				</div>

				<!--附近-->
				<div class="homefoodd_inner homefoodd_inner2">
					<div class="homefoodd_inner_left">
						<div class="hil_inner2 hili_cheak2">附近</div>
						<div class="hil_inner2">热门商圈</div>
						<div class="hil_inner2">姑苏区</div>
						<div class="hil_inner2">虎丘区</div>
					</div>
					
					<div class="homefoodd_inner_right">
						<div class="hir_a2">1km</div>
						<div class="hir_a2">3km</div>
						<div class="hir_a2">5km</div>
						<div class="hir_a2">10km</div>
						<div class="hir_a2">附近</div>
					</div>
				</div>
				
				<!--智能排序-->
				<div class="homefoodd_inner homefoodd_inner3">
					<div class="hi3_inner">
						<div class="hi3i_inner hi3i_inner_cheak">智能排序</div>
						<div class="hi3i_inner">人气优先</div>
						<div class="hi3i_inner">离我最近</div>
						<div class="hi3i_inner">人均从高到低</div>
						<div class="hi3i_inner">人均从低到高</div>
					</div>
				</div>

				<!--筛选-->
				<div class="homefoodd_inner homefoodd_inner4">
					<div class="hi4_inner">
						<div class="hi3i_inner1">优惠和权益</div>
						<div class="hi3i_inner2">
							<div class="hii1">商品</div>
							<div class="hii1">买单立减</div>
							<div class="hii1">优惠券</div>
							<div class="hii1">储值卡</div>
						</div>
						
						<div class="hi3i_inner1">服务</div>
						<div class="hi3i_inner2">
							<div class="hii2">WiFi</div>
							<div class="hii2">停车位</div>
							<div class="hii2">无烟区</div>
							<div class="hii2">营业中</div>
						</div>

						<div class="hi3i_inner1">价格</div>
						<div class="hi3i_inner2">
							<div class="hii3">50以下</div>
							<div class="hii3">50-100</div>
							<div class="hii3">100-300</div>
							<div class="hii3">300以上</div>
						</div>
					</div>
				</div>

				<div class="homefoodd_btn">
					<div class="hbtn_reset">重置</div>
					<div class="hbtn_sure">确定</div>
				</div>

			</div>
			<div class="business-box">
				<div @click="todetails" class="business-list clearfix" v-for="item in business">
					<div class="business-img">
						<img :src="item.img" :alt="item.storeName">
					</div>
					<div class="business-com">
						<div class="com-list">
							<span class="storeName">{{item.storeName}}</span>
							<span class="">{{item.distance}}km</span>
						</div>
						<p class="com-time">{{item.time}}营业</p>
						<div class="com-list">
							<p>
								<span class="Popularity" >{{item.Popularity}}人气</span>
							</p>
							<span class="member">会员卡优惠</span>
						</div>
					</div>
				</div>
			</div>
		</div>
	</body>
	<script type="text/javascript" src="js/jquery-3.2.1.min.js"></script>
	<script type="text/javascript" src="js/vue2.5.16.js"></script>
	<script type="text/javascript">
		var app = new Vue({
			el: '#app',
			data: {
				sorts: [{
						img: 'images/hf_a.png',
						sortname: '快餐小吃'
					},
					{
						img: 'images/hf_b.png',
						sortname: '面包甜点'
					},
					{
						img: 'images/hf_c.png',
						sortname: '零食特产'
					},
					{
						img: 'images/hf_d.png',
						sortname: '休闲茶饮'
					}
				],
				banner: 'images/hf_e.png',
                business: [
                    {
                        img: "./images/fj.png", storeName: "龙湖甜品店",time: "8:00-21:00", distance: "123",Popularity: "70",
                    }, {
                        img: "./images/fj.png", storeName: "龙湖甜品店",time: "8:00-21:00",  distance: "123",Popularity: "70",
                    }
                ]
			},
			
			methods:{
				//顶部圆形区点击
				toinner:function(){
					window.location.href = 'home_food_inner.html';	
				},
				//详情页
				todetails:function(){
					window.location.href = 'details.html';	
				}
			}
		})
		
		//全部美食点击  
		$('.homefoodc_inner1').click(function() {
			mask();
			$('.homefoodd_btn').css('display', 'none');
			$('.homefoodd_inner1').css('display', 'flex');
		})

		//全部美食左侧点击
		$('.hil_inner').click(function() {
			$('.hil_inner').removeClass('hili_cheak');
			$(this).addClass('hili_cheak');
		})

		//全部美食右侧点击
		$('.hbc_inner').click(function() {
			hidemask();
			$('.homefoodc_inner1>div').text($(this).text())
		})

		//附近点击
		$('.homefoodc_inner2').click(function() {
			mask();
			$('.homefoodd_btn').css('display', 'none');
			$('.homefoodd_inner2').css('display', 'flex');
		})

		//附近左侧点击
		$('.hil_inner2').click(function() {
			$('.hil_inner2').removeClass('hili_cheak2');
			$(this).addClass('hili_cheak2');
		})

		//附近右侧点击
		$('.hir_a2').click(function() {
			hidemask();
			$('.hir_a2').removeClass('hir_a2_chaek');
			$(this).addClass('hir_a2_chaek');
			$('.homefoodc_inner2>div').text($(this).text());
		})
		
		//智能排序展开
		$(".homefoodc_inner3").click(function () {
            mask();
            $('.homefoodd_btn').css('display', 'none');
            $('.homefoodd_inner3').css('display', 'flex');
        })
		//智能排序选择
		$('.hi3i_inner').click(function(){
			$('.hi3i_inner').removeClass('hi3i_inner_cheak');
			$(this).addClass('hi3i_inner_cheak');
			hidemask();
			$('.homefoodc_inner3>div').text($(this).text());
		})
		
		//筛选
		$('.homefoodc_inner4').click(function() {
			mask();
			$('.homefoodd_btn').css('display', 'flex');
			$('.homefoodd_inner4').css('display', 'flex');
		})

		//优惠和权益
		$('.hii1').click(function() {
			$(this).toggleClass('hii1_cheak');
		})

		//服务
		$('.hii2').click(function() {
			$(this).toggleClass('hii2_cheak');
		})

		//价格
		$('.hii3').click(function() {
			if($(this).hasClass('hii3_cheak')) {
				$(this).removeClass('hii3_cheak');
			} else {
				$('.hii3').removeClass('hii3_cheak');
				$(this).addClass('hii3_cheak');
			}
		})

		//筛选重置
		$('.hbtn_reset').click(function() {
			$('.hii1').removeClass('hii1_cheak');
			$('.hii2').removeClass('hii2_cheak');
			$('.hii3').removeClass('hii3_cheak');
		})

		//筛选确定
		$('.hbtn_sure').click(function() {
			hidemask();
		})

		//阴影部分点击关闭
		$('.homefoodd').click(function(e) {
			hidemask();
		})

		//阻止内部冒泡
		$('.homefoodd_inner').click(function(e) {
			e.stopPropagation();
		})

		$('.homefoodd_btn').click(function(e) {
			e.stopPropagation();
		})

		//选择分类上方点击
		$('.homefoodc_inner').click(function() {
			$('.homefoodc_inner').css('color', '#666');
			$(this).css('color', '#218ff9');
		})

		//公共蒙层显示
		function mask() {
			$('.homefoodc').addClass('homefoodc_cheak');
			$('.homefoodd').show();
			$('.homefoodd_inner').css('display', 'none');
		}

		//公共蒙层隐藏
		function hidemask() {
			$('.homefoodc').removeClass('homefoodc_cheak');
			$('.homefoodd').hide();
			$('.homefoodc_inner').css('color', '#666');
			$('.homefoodd_btn').css('display', 'none');
		}
	</script>

</html>